<template>
  <Drawer v-model:open="open" :title="$t('test.objectmigration.createtask.index.title_cjrw')" :footer="null" width="100%" @close="closeDrawer" destroyOnClose>
    <!-- 进度条组件 -->
    <a-flex class="stepsWapers">
    <a-steps class="stepsInner" :current="current">
        <a-step v-for="(step, index) in steps" :key="index" :title="step.title"
        :status="index < current ? 'finish': index === current ? 'process': 'wait'"
        >

        </a-step>
      </a-steps>
    </a-flex>
      <!-- 任务组件 (动态组件)-->
      <component :is="steps[current].component" :ref="steps[current].component" @next="next" @prev="prev"/>
      <!-- 下一步/上一步 -->
       <!-- <div class="flex justify-center">
        <a-button type="primary" @click="prev" style="margin-right: 10px;">{{ $t('test.objectmigration.createtask.index.text_syb') }}</a-button>
        <a-button type="primary" @click="next">{{ $t('test.objectmigration.createtask.index.text_xyb') }}</a-button>
       </div> -->
  </Drawer>
</template>

<script >

import { Drawer, Steps, Step } from 'ant-design-vue';
import MyLoading from '@/components/loading/loading.vue';
import MyError from '@/components/loading/error.vue';
import { defineAsyncComponent } from 'vue';

const TaskDeployment = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/createTask/steps/TaskDeployment/TaskDeployment.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
const PreCheck = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/createTask/steps/PreCheck/PreCheck.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
const InfoConfirm = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/createTask/steps/InfoConfirm/InfoConfirm.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
export default {
  components: {
    Drawer,
    Steps,
    Step,
    TaskDeployment,
    PreCheck,
    InfoConfirm,
    MyLoading,
    MyError,
  },
  data() {
    return {
      open: false,
      steps: [
        { title: $t('test.objectmigration.createtask.index.title_rwbs'), component: 'TaskDeployment' },
        { title: $t('test.objectmigration.createtask.index.title_yjc'), component: 'PreCheck' },
        { title: $t('test.objectmigration.createtask.index.title_xxqr'), component: 'InfoConfirm' }
      ],
      current: 0
    }
  },
  mounted() {
    console.log('mounted')
  },
  methods: {
    openDrawer() {
        console.log('zhanshi')
      this.open = true;

    },
    prev() {
      this.current--;
    },
   async next() {
    this.current++;

        
      
    },
    closeDrawer() {
      this.open = false;
      this.current = 0;
      this.$store.commit('clearCache');
    },

  }
}   

</script>

<style scoped lang="scss">
.stepsWapers {
  display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0.3rem;
    padding: 3rem;
    width: 100%;
    height: 50px;
    margin: 0 auto 0.6rem;
    justify-content: center;
    position: sticky;
    top: -20px;
    z-index: 1000;
    box-shadow: 5px 5px 10px #bebebe, 5px 5px 10px #ffffff;
  .stepsInner{
    width: 57%;
  }
}
</style>